<template>
  <view :style="colorStyle">
    <block v-if="!loadingPage">
      <x-skeleton
        type="list"
        :loading="true"
        v-for="(item, index, key) in 10"
        :key="key"
      >
        <view>列表</view>
      </x-skeleton>
    </block>
    <view class="infobox1" v-if="loadingPage">
      <view class="block1">
        <view class="info1 cfff f32"> 累计佣金 </view>
        <view class="info2 cfff">
          {{ total.total }}
        </view>
      </view>
      <view class="block2 flex aitems cfff f28">
        <view class="info1"> 待结算佣金：{{ total.total1 }} </view>
        <view class="info2"> 已结算佣金：{{ total.total2 }} </view>
      </view>
    </view>
    <view class="tabsModule">
      <tabs :list="tablist" :fixed="false" @tablistChange="tablistChange" />
    </view>
    <view class="infobox2">
      <view class="list" v-for="(item, index, key) in list" :key="key">
        <view class="block1 flex aitems between c1F1F1F">
          <view class="info1 f28"> 订单编号：{{ item.orderNo }} </view>
          <view class="info2 f32"> +{{ item.settleAmount }} </view>
        </view>
        <view class="block2 flex aitems between f24">
          <view class="info1 c525252"> 创建时间：{{ item.createTime }} </view>
          <view
            class="info2 cDD5C5C"
            v-if="item.settleStatus == -1 && item.refundAmount <= 0"
          >
            已售后(不结算)
          </view>
          <view
            class="info2 cDD5C5C"
            v-if="item.settleStatus == 0 && item.refundAmount <= 0"
          >
            待入账
          </view>
          <view
            class="info2 themeColor"
            v-if="item.settleStatus == 1 && item.refundAmount <= 0"
          >
            已入账
          </view>
          <view
            class="info2 themeColor"
            v-if="
              item.refundAmount !== 0 && item.refundAmount == item.settleAmount
            "
          >
            已退款 </view
          ><view
            class="info2 themeColor"
            v-if="item.refundAmount > 0 && item.settleAmount > 0"
          >
            部分退款
          </view>
        </view>
      </view>
    </view>
    <nodata v-if="list.length == 0" />
    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import {
  placeOrderSettleTotal,
  placeOrderSettlePage,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import colors from "@/mixins/color";
import { getToken } from "../../utils/storage";
export default {
  mixins: [colors],
  data() {
    return {
      list: [],
      loadingPage: true,
      tablist: [
        {
          name: "全部",
          id: "",
        },
        {
          name: "待入账明细",
          id: 0,
        },
        {
          name: "已入账明细",
          id: 1,
        },
      ],
      tablistindex: 0,
      total: {},
      listTotal: 0,
      current: 1,
    };
  },
  async onLoad(options) {
    if (getToken()) {
      this.placeOrderSettlePage();
    }
  },
  async onShow() {
    if (getToken()) {
      this.placeOrderSettleTotal();
    }
  },
  methods: {
    async placeOrderSettlePage() {
      loading();
      let { data } = await placeOrderSettlePage({
        current: this.current,
        size: 10,
        settleStatus: this.tablist[this.tablistindex].id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.listTotal = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    async placeOrderSettleTotal() {
      let { data } = await placeOrderSettleTotal();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.total = info;
      }
      uni.stopPullDownRefresh();
    },
    tablistChange(index) {
      this.tablistindex = index;
      this.current = 1;
      this.placeOrderSettlePage();
    },
  },
  onReachBottom() {
    if (this.list.length == this.listTotal) return;
    this.current += 1;
    this.placeOrderSettlePage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.placeOrderSettlePage();
    this.placeOrderSettleTotal();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #fff;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #fff;
}

.infobox1 {
  margin: 30rpx 30rpx 0;
  border-radius: 28rpx;
  background: linear-gradient(
    101deg,
    var(--view-theme) 5.79%,
    var(--view-theme) 92.75%
  );
  box-shadow: 0px 0px 80.6px 0px rgba(92, 221, 175, 0.61) inset;
  padding: 40rpx 30rpx;

  .block1 {
    .info1 {
    }

    .info2 {
      font-size: 64rpx;
    }
  }

  .block2 {
    margin: 24rpx 0 0;

    .info1 {
      width: 50%;
    }

    .info2 {
      width: 50%;
    }
  }
}

.infobox2 {
  margin: 0 30rpx 0;

  .list {
    border-bottom: 1px solid #f5f5f5;
    padding: 40rpx 0;

    .block1 {
      .info1 {
      }

      .info2 {
      }
    }

    .block2 {
      margin: 24rpx 0 0;
    }
  }
}

.tabModule {
}
</style>
